<ion-header>
  <ion-toolbar>
    <ion-buttons left>
      <button ion-button icon-left (click)="nav2search()">
        <span [class]="getFilterClass()">
          <ion-icon name="funnel"></ion-icon>
        </span>
      </button>
    </ion-buttons>
    <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
    <ion-buttons right>
      <button ion-button icon-right (click)="nav2contact()">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let person of persons">
      <ion-thumbnail item-start (click)="nav2home(person)">
        <img src="../../assets/imgs/user.svg">
      </ion-thumbnail>
      <h2 (click)="nav2home(person)">{{person.personName}}</h2>
      <p>{{"bed" | translate}}: {{getBedString(person)}}</p>
      <p><span [innerHTML]="getAlarms(person) | safeHtml"></span></p>
      <p>{{"nurse" | translate}}: {{person.nurseName}}</p>

      <button ion-button clear item-end (click)="toggleMute(person)">
        <ion-icon class="almicon" [name]="isMuted(person) ? 'notifications-off' : 'notifications'"></ion-icon>
      </button>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
